$(function(){
    $('.review-demo').hover(function(){
        $(this).find('.img-box').show();
    }, function(){
        $(this).find('.img-box').hide();
    });
    var viewer_box = new Viewer(document.getElementById('review-demo'), {
            navbar: false,
            title: false,
            toolbar: false
        });
    $('#review-demo').click(function(){
        viewer_box.show();
    });

    let index = 0
    $('.file').change((e) => {
        const { id } = e.currentTarget.dataset
        index = ~~id
        handleImageFile()
    })
    function handleImageFile(file) {
        var img = document.createElement('img');
        var fileInput = $(".file")[index]
        if(!file){
            var file = fileInput.files[0]
        }
        if (!file) {
            return
        }
        img.file = file

        $(`.preview:eq(${index})`).empty().append(img)
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function(e) {
             img.src = e.target.result
        }
        $(`.wrapper:eq(${index})`).css({
            'opacity': 0
        })
     }
});